{% extends 'base.html' %}
{% load static %}

{% block title %}
    <title>主机编辑</title>
{% endblock title %}

{% block navheader %}
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>主机编辑</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{% url 'assets:dashboard' %}">首页</a></li>
                        <li class="breadcrumb-item"><a href="{% url 'server:host_lists' %}">主机列表</a></li>
                        <li class="breadcrumb-item active">主机编辑</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
{% endblock navheader %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">主机编辑</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body row">
            <input type="text" id="hostid" value="{{ host.id }}" hidden>
            <div class="col-2 pt-1 pb-1">主机名<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="hostname"
                                                 value="{{ host.hostname }}" disabled></div>
            <div class="col-2 pt-1 pb-1">主机IP<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="int_ip" value="{{ host.int_ip }}" ></div>
{#            <div class="col-2 pt-1 pb-1">公网IP：</div>#}
{#            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="ex_ip"#}
{#                                                 value="{{ host.ex_ip | default:'' }}"></div>#}
            <div class="col-2 pt-1 pb-1">环境<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1">
                <select class="form-control" id="env" style="width: 100%;">
                    {% for env in env_choices %}
                        <option value="{{ env.0 }}"
                                {% if host.env == env.0 %}selected="selected"{% endif %}>{{ env.1 }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-2 pt-1 pb-1">端口<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1"><input class="form-control" type="text" id="port" value="{{ host.port }}">
            </div>
            <div class="col-2 pt-1 pb-1">系统/型号<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1"><input class="form-control" type="text" id="release" value="{{ host.release }}">
            </div>
            <div class="col-2 pt-1 pb-1">用户<span style="color:red;"> * </span>：</div>
            <div class="col-10 pt-1 pb-1">
                <select class="form-control" id="binduserid" style="width: 100%;">
                    <option value="{{ host.remote_user.id }}" selected="selected">{{ host.remote_user.name }}</option>
                    {% for user in other_users %}
                        <option value="{{ user.id }}">{{ user.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-2 pt-1 pb-1">备注：</div>
            <div class="col-10 pt-1 pb-1"><textarea id="memo"
                                                    class="form-control">{{ host.memo | default:'' }}</textarea></div>
            <div class="offset-2 col-10 pt-1 pb-1">
                <div class="custom-switch custom-switch-on-success">
                    <input type="checkbox" class="custom-control-input" id="enabled"
                           {% if host.enabled %}checked{% endif %}>
                    <label class="custom-control-label" for="enabled">启用</label>
                </div>
            </div>
            <div class="offset-2 col-10 pt-2">
                <a class="btn btn-default" href="{% url 'server:host_lists' %}">返回</a>
                <button class="btn btn-success ml-2" onclick="changeuserprofile(this);">提交</button>
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
{% endblock content %}

{% block js %}
    <script>
        // 修改主机信息
        changeuserprofile = function (event) {
            toastr.options.closeButton = true;
            toastr.options.showMethod = 'slideDown';
            toastr.options.hideMethod = 'fadeOut';
            toastr.options.closeMethod = 'fadeOut';
            toastr.options.timeOut = 3000;
            toastr.options.extendedTimeOut = 0;
            toastr.options.progressBar = true;
            toastr.options.positionClass = 'toast-top-right';

            $(event).removeAttr("onclick");
            $(event).attr("disabled", true);

            var hostid = $('#hostid').val();
            var hostname = $('#hostname').val();
            var int_ip = $('#int_ip').val();
            {#var ex_ip = $('#ex_ip').val();#}
            var env = $('#env').val();
            var port = $('#port').val();
            var release = $('#release').val();
            var memo = $('#memo').val();
            var binduserid = $('#binduserid').val();
            var enabled;
            if ($("#enabled").is(':checked')) {
                enabled = true;
            } else {
                enabled = false;
            }

            csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';

            $.ajax({
                url: "{% url 'server_api:host_update' %}",
                async: true,
                type: 'POST',
                dataType: 'json',
                data: {
                    'csrfmiddlewaretoken': csrfmiddlewaretoken,
                    'hostid': hostid,
                    'int_ip': int_ip,
                    {#'ex_ip': ex_ip,#}
                    'env': env,
                    'port': port,
                    'release': release,
                    'memo': memo,
                    'enabled': enabled,
                    'binduserid': binduserid,
                },
                timeout: 5000,
                cache: true,
                beforeSend: LoadFunction, //加载执行方法
                error: errFunction,  //错误执行方法
                success: succFunction, //成功执行方法
            });

            function LoadFunction() {
                // 提交中
            };

            function errFunction() {
                // 消息框
                toastr.error('更新主机错误');
                $(event).removeAttr("disabled");
                $(event).attr("onclick", "changeuserprofile(this);");
            };

            function succFunction(res) {
                if (res.code != 200) {
                    // 消息框
                    toastr.error('更新主机错误: ' + res.err);
                    $(event).removeAttr("disabled");
                    $(event).attr("onclick", "changeuserprofile(this);");
                } else {
                    // 消息框
                    toastr.options.timeOut = 1000;
                    toastr.options.onHidden = function () {
                        window.location.href = "{% url 'server:host_detail' host.id %}";
                    }
                    toastr.success('更新主机成功');
                }
            };
        }
        // 修改主机信息

    </script>
{% endblock js %}